<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-06-06 16:10:24
 * @Description: 
-->
<template>
    <div>
        <el-dialog :modelValue="props.inputData.visible" title="文件夹选择" width="30%" center
            :before-close="closeFileDialog">
            <el-row>
                <el-col :span="24">
                    <el-card class="file-card" :style="`height:${view.height - 350}px`">
                        <el-tree style="max-width: 600px" :props="props1" :load="loadNode" lazy
                            :default-expanded-keys="[0]" node-key="id"  @node-click="getFilesbyExpand" >
                            <template #default="{ node, data }">
                                <span class="custom-tree-node">
                                    <el-icon>
                                        <Folder />
                                    </el-icon> <span>{{ node.label }}</span>
                                </span>
                            </template>
                        </el-tree>
                    </el-card>
                </el-col>
            </el-row>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeFileDialog">取消</el-button>
                    <el-button type="primary" @click="submitHandler">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { defineComponent, reactive,computed, ref, toRefs, onMounted, watch, defineProps, defineEmits } from "vue";
import HttpService from "@/api/api";
import { ElMessage, ElMessageBox, genFileId, } from "element-plus";
import * as _ from "lodash";
import { ElTable } from 'element-plus'
import utils from '@/utils/util'
import { Search } from "@element-plus/icons-vue";
// import { ElMessage, ElMessageBox } from "element-plus";

const props = defineProps({
    inputData: Object
});

// 定义要发射的事件
const emits = defineEmits(['dialogSubmit', 'closeFileDialog']);

var view = reactive({
    height: window.innerHeight,
});

let currentRow =ref('')

const getFilesbyExpand = function (node) {
    currentRow.value = node.fullPath
}
const submitHandler = function () {
    if (currentRow.value) {
        emits('dialogSubmit', convertPathToUnix(currentRow.value))
        closeFileDialog()
    } else {
        ElMessage({
            message: "请选择至少一个文件 ",
            type: "warning",
        });
    }
}
const convertPathToUnix = function (windowsPath) {
    return windowsPath.replace(/\\/g, '/');
}

const closeFileDialog = function () {
    emits('closeFileDialog')
}

interface Tree {
    id?: number
    name: string
    leaf?: boolean
    fullPath: string
}

const props1 = {
    label: 'name',
    children: 'zones',
    isLeaf: 'leaf',
}

const loadNode = (node, resolve: (data: Tree[]) => void) => {
    if (node.level === 0) {
        resolve([{
            id: 0,
            name: 'Temp',
            fullPath: "D:/Temp"
        }])
    } else {
        let params = {
            folderPath: node.data.fullPath,
        };
        HttpService.foldersManage.getFolders(
            params,
            (res) => {
                if (res.status == 200) {
                    resolve(res.data)
                }

            },
            (error) => {
                console.log(error);
            }
        );
    }
}


onMounted(() => {

});
</script>
<style lang="scss" scoped>
.search-container {
    display: flex;
    justify-content: space-between
}
</style>
<style lang="scss">
.file-card {
    overflow: auto;
    .el-table {
        tr {
            cursor: pointer;
        }

        .el-table__body tr.current-row> {
            td.el-table__cell {
                // transition: all 1s;
                background-color: #0b0c0c75;
                // background-color: #03253dda!important;
                color: #409EFF;
            }
        }
    }
}
</style>